* {
    margin: 0; /* 设置所有元素的外边距为0 */
    padding: 0; /* 设置所有元素的内边距为0 */
}

body {
    overflow: hidden; /* 隐藏页面滚动条 */
}

.navbar {
    /*position: fixed;*/
    inset: 20px;
    width: 85px;
    background: #2a3f54;
    border-left: 1px solid #2a3f54;
    transition: 0.1s;
    overflow: hidden;
    border-radius: 50px;
    box-shadow: 15px 15px 25px rgba(0, 0, 0, 0.05);
}

.main {
    background-color: white;
    font-size: 60px; /* 设置主要内容的字体大小 */
    font-weight: bold; /* 设置主要内容的字体粗细 */
    flex: 1; /* 设置主要内容弹性伸缩 */
    position: relative; /* 设置主要内容相对定位 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    border-radius: 15px;
}

.menu {
    display: flex;
}

.navbar ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.navbar ul li {
    position: relative;
    list-style: none;
    margin-bottom: 10px;
    margin-right: 16px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* min-width: 70px; */
    /* max-width: 236px; */
    height: 70px;
}

.navbar ul li:hover {
    background-color: #fff; /* 鼠标悬停时背景颜色 */
    color: #b1b1b1; /* 鼠标悬停时字体颜色 */
}

.navbar ul li:nth-child(1) {
    top: 20px;
    margin-bottom: 40px;
    background: none;
}

.navbar ul li:not(:first-child):hover::before
{
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 20px;
    height: 20px;
    background: transparent;
    border-bottom-left-radius: 20px;
    box-shadow: 7.5px 7.5px 0 7.5px #fff;
}
.navbar ul li:not(:first-child):hover::after
{
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-left-radius: 20px;
    box-shadow: 7.5px -7.5px 0 7.5px #fff;
}

.navbar ul li span {
    margin-right: 20px;
}

.navbar ul li:first-child {
    display: flex;
    /* justify-content: center; */
    /* align-items: center; */
    padding: 0 2px;
}/* 上下内边距0，左右内边距10像素 */


.navbar ul li:first-child img {
    width: 50px; /* 图片宽度50像素 */
    height: 50px; /* 图片高度50像素 */
    border-radius: 50%; /* 图片圆角 */
}

.navbar ul li h1 {
    color: lightgray;
    font-size: 40px;
    margin-right: 20px;
}

.navbar ul li .rasim {
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    flex-direction: column; /* 垂直排列 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    color: #d1d1d1; /* 字体颜色 */
    text-decoration: none; /* 文本无下划线 */
}

.navbar ul li .rasim i {
    font-size: 30px; /* 图标字体大小 */
    margin-bottom: 10px; /* 下外边距10像素 */
}

.navbar ul li .rasim span {
    font-size: 12px; /* 字体大小12像素 */
    white-space: nowrap; /* 不换行显示 */

}

.navbar ul li .rasim:hover {
    color: #fff; /* 鼠标悬停时字体颜色为白色 */
    background-color: #fff; /* 鼠标悬停时背景颜色 */
}

.navbar input:checked + label {
    left: 200px; /* 复选框选中时标签左移200像素 */
}

.navbar input:checked ~ ul {
    width: 200px; /* 复选框选中时列表宽度变为200像素 */
}

.navbar input:checked ~ ul li:first-child {
    justify-content: flex-start; /* 复选框选中时第一个列表项左对齐 */
}

.navbar input:checked ~ ul li:first-child span {
    display: block; /* 复选框选中时第一个列表项显示 */
}

.navbar input:checked ~ ul li .rasim {
    flex-direction: row; /* 复选框选中时列表项水平排列 */
    justify-content: flex-start; /* 列表项左对齐 */
}

.navbar input:checked ~ ul li .rasim i {
    font-size: 18px; /* 复选框选中时图标字体大小 */
    margin: 0 15px 0 30px; /* 图标外边距 */
}

.navbar input:checked ~ ul li .rasim span {
    font-size: 14px; /* 复选框选中时字体大小 */
}

span {
    width: 70%;
    color: #d1d1d1;
    cursor: pointer;
}

.fa {
    display: flex;
    flex-direction: row;
}

.toggle {
    position: absolute;
    bottom: 18px;
    right: 18px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5em;
    cursor: pointer;
    background: #b1b1b1;
    border-radius: 50%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
}

.toggle::before {
    content: '';
    position: absolute;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: #35495d;
    transform: translateY(-5px);
    transition: 1s;
}

.toggle::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: #35495d;
    transform: translateY(5px);
    transition: 1s;
}

.navbar.active {
    width: 250px;
    border-radius: 20px;
}

.navbar.active .toggle::before {
    transform: translateY(0px) rotate(-405deg);
}

.navbar.active .toggle::after {
    transform: translateY(0px) rotate(225deg);
}

